<template>
  <div class="gswiper">
    <ul :style="{marginLeft: marginLeft + 'px', transitionDuration}">
      <li v-for="(item, index) in goods" :key="index">
        <img :src="item.image" alt />
        <div class="title">{{item.goods_name}}</div>
        <div class="price">
          <span class="price-sp">￥{{item.seckill_price}}</span>
          <span class="price-p">￥{{item.price}}</span>
        </div>
      </li>
    </ul>
    <div @click="left" class="leftbtn"> < </div>
    <div @click="right" class="rightbtn"> > </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transitionDuration: "0.5s",
      marginLeft: -198 * 4, // 向左滚动的位置
      goods: [
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "倒数第4个",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name: "倒数第3个",
          price: "1299",
          seckill_price: "998"
        },
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "倒数第2个",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name: "倒数第1个",
          price: "1299",
          seckill_price: "998"
        },
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "正数第1个",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name: "正数第2个",
          price: "1299",
          seckill_price: "998"
        },
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "华为nova5i手机 苏音蓝 8GB+128GB",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name:
            "风行电视 43英寸 43X1 六核8G 全高清 同步教育人工智能语音 家用液晶网络平板智能电视机 有线无线连接",
          price: "1299",
          seckill_price: "998"
        },
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "华为nova5i手机 苏音蓝 8GB+128GB",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name:
            "风行电视 43英寸 43X1 六核8G 全高清 同步教育人工智能语音 家用液晶网络平板智能电视机 有线无线连接",
          price: "1299",
          seckill_price: "998"
        },
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "华为nova5i手机 苏音蓝 8GB+128GB",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name:
            "风行电视 43英寸 43X1 六核8G 全高清 同步教育人工智能语音 家用液晶网络平板智能电视机 有线无线连接",
          price: "1299",
          seckill_price: "998"
        },
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "华为nova5i手机 苏音蓝 8GB+128GB",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name:
            "风行电视 43英寸 43X1 六核8G 全高清 同步教育人工智能语音 家用液晶网络平板智能电视机 有线无线连接",
          price: "1299",
          seckill_price: "998"
        },
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "华为nova5i手机 苏音蓝 8GB+128GB",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name:
            "风行电视 43英寸 43X1 六核8G 全高清 同步教育人工智能语音 家用液晶网络平板智能电视机 有线无线连接",
          price: "1299",
          seckill_price: "998"
        },
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "华为nova5i手机 苏音蓝 8GB+128GB",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name:
            "风行电视 43英寸 43X1 六核8G 全高清 同步教育人工智能语音 家用液晶网络平板智能电视机 有线无线连接",
          price: "1299",
          seckill_price: "998"
        },
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "华为nova5i手机 苏音蓝 8GB+128GB",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name:
            "风行电视 43英寸 43X1 六核8G 全高清 同步教育人工智能语音 家用液晶网络平板智能电视机 有线无线连接",
          price: "1299",
          seckill_price: "998"
        },
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "倒数第4个",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name: "倒数第3个",
          price: "1299",
          seckill_price: "998"
        },
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "倒数第2个",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name: "倒数第1个",
          price: "1299",
          seckill_price: "998"
        },
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "正数第1个",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name: "正数第2个",
          price: "1299",
          seckill_price: "998"
        },
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "华为nova5i手机 苏音蓝 8GB+128GB",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name:
            "风行电视 43英寸 43X1 六核8G 全高清 同步教育人工智能语音 家用液晶网络平板智能电视机 有线无线连接",
          price: "1299",
          seckill_price: "998"
        }
      ]
    };
  },
  methods: {
    left() {
      // 一次移动4张图片的位置(宽)
      this.marginLeft = this.marginLeft - 198 * 4;
      // 移动完之后判断，如果已经移动到了最后面，就切换到最前4个
      if (this.marginLeft === -4752) {
        setTimeout(() => {
          // 清除动画效果
          this.transitionDuration = "0s";
          // 让图片重新 变为第一组
          this.marginLeft = -198 * 4;
          // 延迟加上动画效果
          setTimeout(() => {
            this.transitionDuration = "0.5s";
          }, 100);
        }, 500);
      }
    },
    right() {
      // 一次移动4张图片的位置(宽)
      this.marginLeft = this.marginLeft + 198 * 4;
      // 移动完之后判断，如果已经移动到了最后面，就切换到最前4个
      if (this.marginLeft === 0) {
        setTimeout(() => {
          // 清除动画效果
          this.transitionDuration = "0s";
          // 让图片重新 变为最后一组 20~24
          this.marginLeft = -198 * 20;
          // 延迟加上动画效果
          setTimeout(() => {
            this.transitionDuration = "0.5s";
          }, 100);
        }, 500);
      }
    }
  }
};
</script>

<style lang="scss">
$cellWidth: 198px;
.gswiper {
  position: relative;
  background: #fff;
  width: $cellWidth * 4;
  overflow: hidden;
  .leftbtn,
  .rightbtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #000;
    text-align: center;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    opacity: 0.2;
  }
  .leftbtn {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
  }
  .rightbtn {
    right: 0;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
  }
  img {
    width: 85%;
  }
  ul {
    width: $cellWidth * 28;
    transition: all;
  }
  li {
    position: relative;
    float: left;
    width: $cellWidth;
    padding: 34px 20px;
    text-align: center;
    overflow: hidden;
    &::after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 1px;
      background-image: linear-gradient(#fff, #eee, #fff);
    }
  }
  .title {
    width: 100%;
    height: 1.6em;
    overflow: hidden;
    margin: 9px 0;
  }
  .price {
    span {
      float: left;
      border: 1px solid #e1251b;
      vertical-align: middle;
    }
    &-sp {
      position: relative;
      width: 82px;
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      background: #e1251b;
      &::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 76px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 24px 8px 0 0;
        border-color: transparent #fff transparent transparent;
      }
    }
    &-p {
      padding: 3px 15px;
      color: #ccc;
      text-decoration: line-through;
      background-color: #fff;
    }
  }
}
</style>